<style>



</style>
<template>
    <div  class="table-fix ly-flex-table" :class="{'ly-table-split':split}">
        <div style="display: none;" ref="header_hidden">
            <slot>
            </slot>
        </div>
        <div style="display: flex;" class="ly-table-header">
            <ly-table-column-header :key="index"  v-for="(column,index) in columns" :column="column"  :style="{flex:(!column.width&&!column.flex)?column.flex_def:column.flex,width:column.width+'px','text-align':column.align}" ></ly-table-column-header>
        </div>
        <div class="ly-table-item-box" v-for="(item,index) in data">
            <ly-table-row style="border-bottom: 1px solid #ebedf0;"  v-if="header" :index="index" :option="header" :row="item"></ly-table-row>
            <div class="ly-table-content">
               <ly-table-content :key="ii"  v-for="(column,ii) in columns" :index="index" :style="{flex:(!column.width&&!column.flex)?column.flex_def:column.flex,width:column.width+'px','text-align':column.align}" :column="column" :row="item"></ly-table-content>
            </div>
            <ly-table-row style="border-top: 1px solid #ebedf0;"  v-if="footer" :index="index" :option="footer" :row="item"></ly-table-row>
        </div>

    </div>
</template>
<script>
    Rap.define('', '', function () {
        var table_id=0;
        return {
            name: 'ly-table',
            props: {
                data: Array,
                split: Boolean
            },
            data: function () {
                table_id++;
                return {
                    tableId: table_id,
                    columns: [],
                    header: null,
                    footer:null
                };
            },methods:{
                addColumn:function (column,index) {
                    if(this.columns.length<=index){
                        this.columns.push(column);
                    }else{
                        this.columns.splice(index, 0,column)
                    }

                },removeColumn:function (column) {
                    this.columns.splice(this.columns.indexOf(column), 1)
                }
            }
        }
    });
</script>
